<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="bootsrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/index.css">
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"> -->

</head>

<body>
    <!-- 头部 -->
    <header>
        <nav class="navbar fixed-top navbar-expand-lg ">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">LOGO</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas"
                    data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar"
                    aria-labelledby="offcanvasNavbarLabel">
                    <div class="offcanvas-header">
                        <h5 class="offcanvas-title" id="offcanvasNavbarLabel">LOGO</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                    </div>
                    <div class="offcanvas-body">
                        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3 nav-underline ">
                            <li class="nav-item">
                                <a class="nav-link " href="../美化/主页.html">美化</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">服务</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link " href="#">联系方式</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link " href="#">联系方式</a>
                            </li>
                        </ul>
                        <form class="d-flex" role="search" class="search">
                            <input class="form-control me-2" type="search" placeholder="Welcom" aria-label="Search">
                            <button class="btn" type="submit">Search</button>
                        </form>
                    </div>
                </div>
            </div>
        </nav>
    </header>
    <!-- 第二部分 -->
    <section class="content-first">
        <div class="content-item">
            <div class="container">
                <div class="row content-box">
                    <div class="image col-lg-6">
                        <img src="images/cartoon-newspaper.png" alt="">
                    </div>
                    <div class="text col-lg-6">
                        <h1>Our group <i class="text-i">website</i></h1>
                        <p class="text-break">
                            Now I often have vague hallucinations in front of my eyes, and I seem to be able to see the
                            flow of time. Time appears
                            as a transparent gray, and everything is contained in this hidden gray. We don't live on the
                            land, in fact we live in
                            time. Fields, streets, rivers, and houses are our companions in time. Time moves us forward
                            or backward and changes our
                            appearance.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <script src="bootsrap/js/bootstrap.min.js"></script>
    <!-- 主页底部 -->
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-lg-6 works">
                    <p>人生弯弯曲曲水，世事重重叠叠山。热情去奔跑，去超越，然后才能拾掇失意后的坦然，挫折后的不屈，困苦艰难后的从容。</p>
                    <a href="#" class="w-work col-sm-12">
                        <img src="images/footer-img.png" alt="" class="f-img ">
                        <h6>我们的作品</h6>
                        <small>我们的代码仓库</small>
                    </a>
                </div>

                <div class="col-lg-2 t col-sm-4 col-6">
                    <h5>常见问题</h5>
                    <ul class="list-unstyled">
                        <li><a href="#">产品问题</a></li>
                        <li><a href="#">服务态度</a></li>
                        <li><a href="#">售后详情</a></li>
                    </ul>
                </div>
                <div class="col-lg-2 t col-sm-4 col-6">
                    <h5>联系我们</h5>
                    <ul class="list-unstyled">
                        <li><a href="#">个人博客</a></li>
                        <li><a href="#">微信</a></li>
                        <li><a href="#">QQ</a></li>
                    </ul>
                </div>
                <div class="col-lg-2 t col-sm-4">
                    <h5>友情链接</h5>
                    <ul class="list-unstyled">
                        <li><a href="https://www.bilibili.com/">哔哩哔哩</a></li>
                        <li><a href="https://www.jd.com/">京东</a></li>
                        <li><a href="https://www.midea.com.cn/">美的</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>

</body>

</html>